<template>
  <div class="photoinfo-container">
    <h3 class="title">{{ photoinfo.title }}</h3>
    <p class="info">
      <span>发表时间: {{photoinfo.add_time | dateFromat}}</span>
      <span>点击次数: {{ photoinfo.click }}</span>
    </p>
    <hr />
    <!-- 缩略图区域 -->
    <div class="thumb-img-group">
      <!-- <img :src="item.src" alt="" v-for="(item,index) in thumimage" :key="index"> -->
      <vue-preview :slides="thumimage" @close="handleClose"></vue-preview>
      <!-- <img class="preview-img" v-for="(item, index) in thumimage" :src="item.src" height="100" @click="$preview.open(index, thumimage)" :key="item.src"> -->
    </div>
    <div class="content" v-html="photoinfo.content"></div>
    <mt-comment :newsid="id" />
  </div>
</template>

<script>
import MtComment from "../sub-components/Comment.vue";
export default {
  components: {
    MtComment
  },
  created() {
    // 发送网络请求
    this.__getPhotoInfo();
    // 获取缩略图
    this.__getThumimage();
  },
  props: ["id"],
  data() {
    return {
      photoinfo: {},
      thumimage: []
    };
  },
  methods: {
    // =========== 发送网络请求 ==========
    async __getPhotoInfo() {
      const { data: res } = await this.$http.get("getimageinfo/" + this.id);
      if (res.status !== 0) return;
      this.photoinfo = res.message[0];
    },
    async __getThumimage() {
      const { data: res } = await this.$http.get("getthumimages/" + this.id);
      if (res.status !== 0) return;
      res.message.forEach(el => {
        el.w = 600;
        el.h = 400;
        el.msrc = el.src;
      });
      this.thumimage = res.message;
    },
    handleClose() {}
  }
};
</script>

<style lang='scss' scoped>
.photoinfo-container {
  padding: 3px;
}
.title {
  font-size: 15px;
  text-align: center;
  margin: 15px 0;
  color: #26a2ff;
}
.info {
  display: flex;
  justify-content: space-between;
}

.content {
  font-size: 15px;
  line-height: 30px;
  color: #999;
}

.thumb-img-group {
  img {
    width: 100px;
  }
}

.thumb-img-group {
  /deep/ .my-gallery {
    display: flex;
    flex-wrap: wrap;
    figure {
      width: 30%;
      margin: 5px;
      img {
        width: 100%;
      }
    }
  }
}
</style>